import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Select } from 'antd';
let timeout;
let currentValue;
const Option = Select.Option;
@connect(({ classInfo3, loading }) => ({
  classInfo:classInfo3,
  loading: loading.models.classInfo,
}))
class ClassInfoStudentSearch extends PureComponent {
  state = {
    data: [],
    value: '',
  };
  fetch = (value, callback) => {
    const { dispatch } = this.props;
    let _this = this;
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
    currentValue = value;
    function fake() {
      //发送请求
      dispatch({
        type: 'classInfo3/getStudentList',
        payload:
          'studentName=' +
          currentValue +
          '&classType=' +
          _this.props.classType +
          '&subject=' +
          _this.props.subject,
      }).then(() => {
        const { similarStudentList } = _this.props.classInfo;
        if (similarStudentList) {
          callback(similarStudentList);
        }
      });
    }

    timeout = setTimeout(fake, 300);
  };
  componentDidMount() {
    this.setState({
      value: '',
    });
  }
  handleSearch = value => {
    this.fetch(value, data => this.setState({ data }));
  };

  handleChange = value => {
    this.setState({ value });
    this.props.onOk(this.state.data.find(item => item.id == value));
  };

  render() {
    return (
      <Select
        showSearch
        value={this.state.value}
        placeholder="请输入学生姓名"
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onSearch={this.handleSearch}
        onChange={this.handleChange}
        notFoundContent={null}
        style={{ width: 200 }}
      >
        {this.state.data.map((item, index) => (
          <Option key={item} value={item.id}>
            {item.name}
          </Option>
        ))}
      </Select>
    );
  }
}


export default ClassInfoStudentSearch;
